<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>提示冒泡 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="提示冒泡 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="提示冒泡 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="../docs/index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
  
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="../components/download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      


<nav class="collapse bd-links" id="bd-docs-nav">
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../docs/index.html"> 快速入门 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../docs/index.html">关于</a></li>
    <li><a href="../docs/download.html">下载</a></li>
    <li><a href="../docs/contents.html">目录结构</a></li>
    <li><a href="../docs/browsers-devices.html">浏览器与设备调优</a></li>
    <li><a href="../docs/javascript.html">JavaScript脚本</a></li>
    <li><a href="../docs/theming.html">主题化</a></li>
    <li><a href="../docs/build-tools.html">编译工具</a></li>
    <li><a href="../docs/webpack.html"> Webpack模块化</a></li>
    <li><a href="../docs/accessibility.html">无障碍浏览</a></li>
    </ul>
  </div>
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html"> 布局 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../layout/overview.html">概述</a></li>
    <li><a href="../layout/grid.html">栅格</a></li>
    <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
    </ul>
  </div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
    <li><a href="../content/typography.html"> 排版 </a> </li>
    <li><a href="../content/code.html"> 代码 </a> </li>
    <li><a href="../content/images.html"> 图片 </a> </li>
    <li><a href="../content/tables.html"> 表格 </a> </li>
    <li><a href="../content/figures.html"> 图文框 </a> </li>
  </ul>
</div>
<div class="bd-toc-item active"> <a class="bd-toc-link" href="alerts.html"> 组件 </a>
  <ul class="nav bd-sidenav">
    <li><a href="alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="badge.html"> 徽章(Badge) </a> </li>
    <li><a href="breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="buttons.html"> 按钮(Button) </a> </li>
    <li><a href="button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="card.html"> 卡片(Card) </a> </li>
    <li><a href="carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="forms.html"> 表单(Form) </a> </li>
    <li><a href="input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="navs.html"> 导航/滑动门(Navs) </a> </li>
    <li><a href="navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="progress.html"> 进度条(Progress) </a> </li>
    <li><a href="scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li class="active bd-sidenav-active"><a href="tooltips.html"> 提示冒泡(Tooltip) </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../utilities/borders.html"> 边框(border) </a> </li>
    <li><a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
    <li><a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
    <li><a href="../utilities/colors.html"> 颜色(color) </a> </li>
    <li><a href="../utilities/display.html"> Display显示属性 </a> </li>
    <li><a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
    <li><a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
    <li><a href="../utilities/float.html"> Float浮动属性 </a> </li>
    <li><a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
	<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
    <li><a href="../utilities/position.html"> Position固顶(底)及定位 </a> </li>
    <li><a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders)</a></li>
    <li><a href="../utilities/shadows.html"> 阴影(shadows)</a></li>
    <li><a href="../utilities/sizing.html"> 规格(sizi)</a></li>
    <li><a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
    <li><a href="../utilities/text.html"> 文本处理 </a> </li>
    <li><a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
    <li><a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/approach.html"> 延伸 </a>
  <ul class="nav bd-sidenav">
	<li> <a href="../extend/approach.html"> 方法论 </a> </li>
    <li><a href="../extend/icons.html"> 图标 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
  <ul class="nav bd-sidenav">
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
  <ul class="nav bd-sidenav">
    <li> <a href="../about/history.html"> 成长历史 </a> </li>
    <li> <a href="../about/team.html"> 项目团队 </a> </li>
    <li> <a href="../about/brand.html"> 品牌标志 </a> </li>
    <li> <a href="../about/license.html"> 许可授权 </a> </li>
    <li> <a href="../about/translations.html"> 翻译 </a> </li>
  </ul>
</div>
</nav>
</div>


<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#overview">概览</a></li>
    <li class="toc-entry toc-h2"><a href="#example-enable-tooltips-everywhere">示例：在任何地方启用tooltip提示冒泡插件</a></li>
    <li class="toc-entry toc-h2"><a href="#examples">实际范例</a></li>
    <li class="toc-entry toc-h2"><a href="#usage">用法</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#markup">标记</a>
		<li class="toc-entry toc-h3"><a href="#disabled-elements">禁用元素</a></li>
        <li class="toc-entry toc-h3"><a href="#options">选项</a></li>
        <li class="toc-entry toc-h3"><a href="#methods">方法</a>
          <ul>
            <li class="toc-entry toc-h4"><a href="#tooltipoptions">$().tooltip(options)</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltipshow">.tooltip('show')</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltiphide">.tooltip('hide')</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltiptoggle">.tooltip('toggle')</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltipdispose">.tooltip('dispose')</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltipenable">.tooltip('enable')</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltipdisable">.tooltip('disable')</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltiptoggleenabled">.tooltip('toggleEnabled')</a></li>
            <li class="toc-entry toc-h4"><a href="#tooltipupdate">.tooltip('update')</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h3"><a href="#events">活动</a></li>
      </ul>
    </li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">提示冒泡(Tooltip)</h1>
  <p class="bd-lead">使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例，用于本地标题存储的动画和数据属性。</p>
   
  <h2 id="overview">概览</h2>
  <p>使用提示冒泡持件时应了解以下：</p>
  <ul>
    <li>Tooltip提示冒泡组件依赖于 <a href="https://popper.js.org/">Popper.js</a> ，你必须将<a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">popper.min.js</a> 文件放在 bootstrap.js之前调用，或者使用 <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code>这两个已经包含了 Popper.js 的脚本。</li>
    <li>如果自行编译JS，请 <a href="https://code.z01.com/docs/4.0/getting-started/javascript/#util">包含 <code class="highlighter-rouge">util.js</code></a>文件。</li>
    <li>出于性能安排，Tooltip提示冒泡是一个可选插件，所以 <strong>你必须自己初始化它们</strong>。</li>
    <li>标题（或内容）零长度情况下，Tooltip提示冒泡插件不会显示（生效）。</li>
    <li>指定 <code class="highlighter-rouge">container: 'body'</code> 以避免复杂组年（如输入框组、按钮组等）中渲染呈出混乱（出问题）。</li>
    <li>在隐藏元素上触发Tooltip提示冒泡插件不会起作用（无效行为）。</li>
    <li> Tooltip提示冒泡插件的<code class="highlighter-rouge">.disabled</code> 或 <code class="highlighter-rouge">disabled</code> 元素必须放在外层（父层）元素上。</li>
    <li>如果从一个跨多行的链接上触发Tooltip提示冒泡插件，提示冒泡将居中，在你的<code class="highlighter-rouge">&lt;a&gt;</code>上使用<code class="highlighter-rouge">white-space: nowrap;</code> 可避免这种行为（即回归左右对齐）。</li>
    <li>必须先隐藏Tooltip提示冒泡插件，然后才能从DOM中删除相应的元素。</li>
  </ul>
  <div class="bd-callout bd-callout-info">
<p>此组件的动画效果取决于<code class="highlighter-rouge">prefers-reduced-motion</code> 媒体查询. 请参阅我们的 <a href="https://code.z01.com/docs/4.3/getting-started/accessibility/#reduced-motion">辅助功能文档的简化动作部分</a>.</p>
</div>
  <p>都明白了？很好。让我们来通过一些例子来看它们具体是如何运作的。</p>
  <h2 id="example-enable-tooltips-everywhere">示例：在任何地方启用tooltip提示冒泡插件</h2>
  <p>在网页上初始化所有的tooltip提示冒泡插件一个途径就是用<code class="highlighter-rouge">data-toggle</code> 来选择它们：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle="tooltip"]'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">()</span>
<span class="p">})</span></code></pre>
  </figure>
  <h2 id="examples">实际范例</h2>
  <p>请用鼠标点击下面一段文字上的链接，查看tooltip提示冒泡效果：</p>
  <div class="bd-example tooltip-demo">
    <p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. </p>
  </div>
  <p>将鼠标悬停在下面的按钮上，可以看到四个工具提示方向:顶部、右侧、底部和左侧。</p>
  <div class="bd-example tooltip-demo">
  <div class="bd-example-tooltips">
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
  </div>
</div>
<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Tooltip on top"</span><span class="nt">&gt;</span>
  Tooltip on top
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Tooltip on right"</span><span class="nt">&gt;</span>
  Tooltip on right
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Tooltip on bottom"</span><span class="nt">&gt;</span>
  Tooltip on bottom
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"left"</span> <span class="na">title=</span><span class="s">"Tooltip on left"</span><span class="nt">&gt;</span>
  Tooltip on left
<span class="nt">&lt;/button&gt;</span></code></pre></figure>

  <p>并且支持自定义HTML：</p>
  <figure class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-html=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"</span><span class="nt">&gt;</span>
  Tooltip with HTML
<span class="nt">&lt;/button&gt;</span></code></pre>
  </figure>
  <h2 id="usage">用法</h2>
  <p>tooltip提示冒泡插件根据需要生成内容和标记，默认情况下我们将它放在触发元素之后。</p>
  <p>使用JavaScript触发提示冒泡：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre>
  </figure>
  
  <div class="bd-callout bd-callout-warning">
<h5 id="overflow-auto-and-scroll">溢出<code class="highlighter-rouge">自动</code>和<code class="highlighter-rouge">滚动</code></h5>
<p>当父容器溢出时，工具提示位置会尝试自动更改<code class="highlighter-rouge">:自动</code>或 <code class="highlighter-rouge">溢出，</code> 像我们的<code class="highlighter-rouge">.table-responsive</code>一样滚动,但仍保留原始位置的定位. 要解决此问题, 请将<code class="highlighter-rouge">boundary</code>选项设置为默认值, <code class="highlighter-rouge">'scrollParent'</code>,例如<code class="highlighter-rouge">'window'</code>:</p>

<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span> <span class="na">boundary</span><span class="p">:</span> <span class="s1">'window'</span> <span class="p">})</span></code></pre></figure>

</div>
  
  <h3 id="markup">标记</h3>
  <p>工具提示框所需要的标记只是一个<code class="highlighter-rouge">data</code> 元素和你希望拥有一个tooltip提示冒泡HTML元素上的 <code class="highlighter-rouge">title</code> ，tooltip提示冒泡插件的标记很简单，尽管它需要一个位置（默认是 <code class="highlighter-rouge">top</code> 顶部指示）。</p>
  <div class="bd-callout bd-callout-warning">
    <h4 id="making-tooltips-work-for-keyboard-and-assistive-technology-users">使tooltip提示冒泡使用于键盘和辅助技术使用者</h4>
    <p>推荐你只为传统的键盘和互动式（如链接或表单控制元件）的HTML元素添加tooltip提示冒泡框，虽然任意的HTML 元素 (如 <code class="highlighter-rouge">&lt;span&gt;</code>)可以通过添加 <code class="highlighter-rouge">tabindex="0"</code> 属性来调整focus行为，但这会为键盘使用者的非互动式元素增加可能困惑（混乱/错误)的定位点。此外大多数辅助技术目前还没有加入这种情况下的提示冒泡效果支持。</p>
  </div>
  <figure class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- HTML to write --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Some tooltip text!"</span><span class="nt">&gt;</span>Hover over me<span class="nt">&lt;/a&gt;</span>

<span class="c">&lt;!-- Generated markup by the plugin --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tooltip bs-tooltip-top"</span> <span class="na">role=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"arrow"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tooltip-inner"</span><span class="nt">&gt;</span>
    Some tooltip text!
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
  </figure>
  <h3 id="disabled-elements">禁用元素</h3>
  <p>具有disabled <code class="highlighter-rouge">disabled</code>属性的元素不是交互式的, 这意味着用户不能集中注意力,、悬停或单击它们来触发工具提示(或弹窗).作为一种解决方案，你将希望从包装器<code class="highlighter-rouge">&lt;div&gt;</code> 或 <code class="highlighter-rouge">&lt;span&gt;</code>,触发工具提示，最好使用 <code class="highlighter-rouge">tabindex="0"</code>, 并覆盖 <code class="highlighter-rouge">pointer-events</code> 禁用元素.</p>
  <div class="tooltip-demo">

<div class="bd-example">
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled="">Disabled button</button>
</span>
</div>
<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-inline-block"</span> <span class="na">tabindex=</span><span class="s">"0"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Disabled tooltip"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">style=</span><span class="s">"pointer-events: none;"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Disabled button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre></figure>

</div>
  <h3 id="options">选项</h3>
  <p>你可以通过数据属性或JavaScript传递选项，如果使用数据属性，请将选项名称附加到<code class="highlighter-rouge">data-</code>,如 <code class="highlighter-rouge">data-animation=""</code>.</p>
  <div class="bd-callout bd-callout-warning">
<p>请注意，出于安全原因，无法使用数据属性提供<code class="highlighter-rouge">sanitize</code>, <code class="highlighter-rouge">sanitizeFn</code>和<code class="highlighter-rouge">whiteList</code>选项.</p>
</div>
  
<table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th style="width: 100px;">名称</th>
        <th style="width: 100px;">Type类型</th>
        <th style="width: 50px;">默认值</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>animation</td>
        <td>boolean</td>
        <td>true</td>
        <td>将CSS淡入淡出应用于tooltip提示冒泡。</td>
      </tr>
      <tr>
        <td>container</td>
        <td>string | element | false</td>
        <td>false</td>
        <td><p>将tooltip提示冒泡框附加到特定的元素，如 <code>container: 'body'</code>.，该选项特别有用，因为它允许您将触模屏定位在触发元素附近的文字内容-这将防止在画面调整大小时，弹出的进示框远离触发元素。</p></td>
      </tr>
      <tr>
        <td>delay</td>
        <td>number | object</td>
        <td>0</td>
        <td><p>显示和隐藏弹出提示框的延迟(ms)-不适用于手动触发类型。</p>
          <p>如果向这个选项提供一个数字，隐藏/显示都会应用这个延迟。</p>
          <p>对象结构是: <code>delay: { "show": 500, "hide": 100 }</code></p></td>
      </tr>
      <tr>
        <td>html</td>
        <td>boolean</td>
        <td>false</td>
        <td><p>在tooltip提示冒泡中插入HTML。</p>
          <p>如果值为true,tooltip提示冒泡的 <code>title</code> 中HTML标签将在工具提示框中呈现。如果是 false, 则将使用jQuery的 <code>text</code>方法将内容插入到DOM中。</p>
          <p>如果你担心XSS攻击，请使用text文字。</p></td>
      </tr>
      <tr>
        <td>placement</td>
        <td>string | function</td>
        <td>'top'</td>
        <td><p>如何提示冒泡，包括： auto | top | bottom | left | right。<br>
            如何指定为 <code>auto</code> ，它会动态地调整提示冒泡的位置。举个例子，如果placement是`auto left`，提示冒泡将尽可能地显示在左侧，否则显示在右侧。</p>
          <p>如果使用一个函数来定位时，将使用提示冒泡的DMO节点作为其第一个参数并将触发元素的DOM节点作为其第二个参数来调用，<code>this</code> 将被设为弹出提示框实例。</p></td>
      </tr>
      <tr>
        <td>selector</td>
        <td>string | false</td>
        <td>false</td>
        <td>如果提供了选择器，提示冒泡将被委派给指定的目标。在实践中，它让动态添加的HTMl内容也能附加提示框，看 <a href="https://github.com/twbs/bootstrap/issues/4215">这里</a> 和 <a href="https://jsbin.com/zopod/1/edit">一个翔实的例子</a>。</td>
      </tr>
      <tr>
        <td>template</td>
        <td>string</td>
        <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
        <td><p>在创建提示冒泡时使用HTMl。</p>
          <p> tooltip提示冒泡的<code>title</code>值将被注入到<code>.tooltip-inner</code>中。</p>
          <p><code>.arrow</code> 将变成tooltip提示冒泡的指示箭头。</p>
          <p>最外层的包裹元素应该有 <code>.tooltip</code> class样式选择器。</p></td>
      </tr>
      <tr>
        <td>title</td>
        <td>string | element | function</td>
        <td>''</td>
        <td><p>如果 <code>title</code> 属性不存在，则提供默认的title值。</p>
          <p>如果提供了一个函数，调用此函数时，此函数的 <code>this</code> 引用被设置为tooltip提示冒泡的元素。</p></td>
      </tr>
      <tr>
        <td>trigger</td>
        <td>string</td>
        <td>'hover focus'</td>
        <td>如何触发提示冒泡 - click | hover | focus | manual.，你可以传递多个触发器，用空格隔开它们，但是`manual`不能与别的触发器结合使用。</td>
      </tr>
      <tr>
        <td>offset</td>
        <td>number | string</td>
        <td>0</td>
        <td>提示冒泡框对于其目标的偏移，更多信息请参阅Popper.js的 <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">偏移（约束）文档</a>。</td>
      </tr>
      <tr>
        <td>fallbackPlacement</td>
        <td>string | array</td>
        <td>'flip'</td>
        <td>指定提示冒泡框在回调时使用哪个位置，有关更多信息请参阅 Popper.js的 <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">偏移（约束）文档</a>。</td>
      </tr>
    </tbody>
  </table>
  <div class="bd-callout bd-callout-info">
    <h4 id="data-attributes-for-individual-tooltips">单个提示冒泡的数据属性</h4>
    <p>单个提示冒泡的选项可以通过使用data数据属性来替补指定，如前文所述。</p>
  </div>
  <h3 id="methods">方法</h3>
  <div class="bd-callout bd-callout-danger">
    <h4 id="asynchronous-methods-and-transitions">异步传输和转换</h4>
    <p>所有的API方法都是<strong>异步</strong>的，并开始一个转换。一旦转换开始但在结束之前，它们就返回给调用者。另外，一个转换组件的方法调用将被忽略。</p>
    <p><a href="https://code.z01.com/docs/4.0/getting-started/javascript/">请参阅我们的JavaScript文档以获取更多信息</a>。</p>
  </div>
  <h4 id="tooltipoptions"><code class="highlighter-rouge">$().tooltip(options)</code></h4>
  <p>将一个元素附加一个提示冒泡处理程序。</p>
  <h4 id="tooltipshow"><code class="highlighter-rouge">.tooltip('show')</code></h4>
  <p>显示一个元素的提示冒泡， <strong>在提示冒泡真正显示之前返回给调用者</strong> (即<code class="highlighter-rouge">shown.bs.tooltip</code> 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡，零长度的提示框不会显示。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre>
  </figure>
  <h4 id="tooltiphide"><code class="highlighter-rouge">.tooltip('hide')</code></h4>
  <p>隐藏元素的冒泡提示，<strong>在提示冒泡框实际被隐藏之前返回给调用者</strong> (即 <code class="highlighter-rouge">hidden.bs.tooltip</code> 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre>
  </figure>
  <h4 id="tooltiptoggle"><code class="highlighter-rouge">.tooltip('toggle')</code></h4>
  <p>切换元素的工具提示冒泡，<strong>在提示冒泡真正显示或隐藏之前返回给调用者</strong> (即 <code class="highlighter-rouge">shown.bs.tooltip</code> 或 <code class="highlighter-rouge">hidden.bs.tooltip</code> 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre>
  </figure>
  <h4 id="tooltipdispose"><code class="highlighter-rouge">.tooltip('dispose')</code></h4>
  <p>隐藏或破坏元素的提示冒泡，使用委派(创建时 <a href="#options">使用了 <code class="highlighter-rouge">selector</code> 选项</a>)的提示冒泡不能在后代触发元素上单独销毁。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span></code></pre>
  </figure>
  <h4 id="tooltipenable"><code class="highlighter-rouge">.tooltip('enable')</code></h4>
  <p>给一个元素的提示冒泡显示的功能， <strong>默认情况下启用Tooltip提示冒泡</strong>。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'enable'</span><span class="p">)</span></code></pre>
  </figure>
  <h4 id="tooltipdisable"><code class="highlighter-rouge">.tooltip('disable')</code></h4>
  <p>删除元素的提示冒泡的显示功能，只有在重新启用后，才能显示提示冒泡。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'disable'</span><span class="p">)</span></code></pre>
  </figure>
  <h4 id="tooltiptoggleenabled"><code class="highlighter-rouge">.tooltip('toggleEnabled')</code></h4>
  <p>切换元素的提示冒泡显示或隐藏的能力。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggleEnabled'</span><span class="p">)</span></code></pre>
  </figure>
  <h4 id="tooltipupdate"><code class="highlighter-rouge">.tooltip('update')</code></h4>
  <p>更新tooltip提示冒泡的位置。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'update'</span><span class="p">)</span></code></pre>
  </figure>
  <h3 id="events">活动</h3>
  <table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th style="width: 150px;">Event事件类型</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>show.bs.tooltip</td>
        <td>当调用<code>show</code> 实例方法时，会立即触发该事件。</td>
      </tr>
      <tr>
        <td>shown.bs.tooltip</td>
        <td>当提示冒泡对用户来说可见时（需要等待CSS过渡完成），会触发该事件。</td>
      </tr>
      <tr>
        <td>hide.bs.tooltip</td>
        <td>当调用<code>hide</code>实例方法时，会立即触发该事件。</td>
      </tr>
      <tr>
        <td>hidden.bs.tooltip</td>
        <td>当提示冒泡对用户来说终于完成隐藏时（需要等待CSS过渡完成），会触发该事件。</td>
      </tr>
      <tr>
        <td>inserted.bs.tooltip</td>
        <td>将提示冒泡框加到DOM后，会在<code>show.bs.tooltip</code> 事件后触发此事件。</td>
      </tr>
    </tbody>
  </table>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTooltip'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.tooltip'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="c1">// do something…</span>
<span class="p">})</span></code></pre>
  </figure>
</main>
</div>
</div>


<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
 

</body>
</html>
